<!DOCTYPE html>
<html>
<head>
    <title>摄像头信息</title>
	<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="./plugins/ztree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="./plugins/select2/select2.min.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList">
	    <div class="col-sm-6 col-md-3" style="width:25%" v-for="tm,index in cameraList"> 
	    	<div class="thumbnail" style="width:260px;">
		        <video 
				    :id="'myPlayer'+tm.serialNum"		      
				    autoplay
				    controls
				    width="250"
			 		height="200"
				    playsInline 
				    webkit-playsinline
			  	>
			  		<source src="rtmp://rtmp01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="" />
			  	</video>	  	
	        <div class="caption">           
	            <div class="panel panel-default">
					<div class="panel-heading">						
						<a  class="btn btn-info" data-toggle="collapse" data-parent="#accordion" :href="'#collapse'+index">
							<i class="fa fa-bars" aria-hidden="true"></i>
						</a>
						<div class="btn-group">									
							<!-- 样式2 -->	
							<a class="btn btn-default" @mousedown="vm.changan(2,tm.serialNum)" @mouseup="songkai(2)" @mouseout="getOut()">
								<i class="fa fa-arrow-left" aria-hidden="true"></i>			
							</a>
							<a class="btn btn-default" @mousedown="changan(0,tm.serialNum)" @mouseup="songkai(0)" @mouseout="getOut()">
								<i class="fa fa-arrow-up" aria-hidden="true"></i>						
							</a>
							<a class="btn btn-default" @mousedown="changan(1,tm.serialNum)" @mouseup="songkai(1)" @mouseout="getOut()">
								<i class="fa fa-arrow-down" aria-hidden="true"></i>						
							</a>
							<a class="btn btn-default" @mousedown="changan(3,tm.serialNum)" @mouseup="songkai(3)" @mouseout="getOut()">
								<i class="fa fa-arrow-right" aria-hidden="true"></i>						
							</a>
						</div>	
						
					</div>
					<div :id="'collapse'+index" class="panel-collapse collapse">
						<div class="panel-body">
							<h4>摄像头所属田块：{{tm.tkName}}</h4>
	            			<h5>摄像头安装位置：{{tm.position}}</h5>
	            			<h6>摄像头序列号：{{tm.serialNum}}</h6>
	            			<a class="btn btn-default" @click="getVideoAll(tm.serialNum);vm.serialNumber=tm.serialNum">
								<i class="fa fa-film" aria-hidden="true"></i>&nbsp;全部视屏						
							</a>
						</div>
					</div>
				</div>
	        </div>
	        </div>	
	  	</div>			 
	  	<div style="margin-left:40.5%;">
			<form class="bs-example bs-example-form" role="form">
				<div class="row" style="width:220px;">
					<div class="col-lg-6">
						<div class="input-group">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" @click="fanye(0)">
									上一页
								</button>
							</span>
							<input style="width:60px;" class="form-control" v-model="pageNumber" onblur="vm.fanye(2)" 
								onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"  
								onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
							>
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" @click="fanye(1)">
									下一页
								</button>
							</span>
						</div><!-- /input-group -->
					</div><!-- /.col-lg-6 --><br>			
				</div><!-- /.row -->
			</form>
		</div>	 
	</div>	
	<div class="panel panel-default" v-show="!showList">
		<div class="panel-heading">
			<div class="input-group" style="border:0px solid red;">
				<span class="input-group-btn">
					<a class="btn btn-default" @click="showVideoAll">
						<i class="fa fa-arrow-left" aria-hidden="true"></i>			
					</a>
				</span>			
				<span class="input-group-btn pull-right" style="width: 295px;">
					<a class="btn btn-default">
						<i class="fa fa-calendar" aria-hidden="true"></i>			
					</a>
					<input style="width:200px;margin-right: 20px;" class=" btn btn-default" id="beginTime" v-model="beginTime">										
					<a class="btn btn-default" @click="queryVideo">
						<i class="fa fa-search" aria-hidden="true"></i>			
					</a>
				</span>
			</div>
		</div>
		<div class="panel-body">
			<div style="width:60%; height:340px;border:0px solid red;" class="pull-left">
			    <iframe id="iframe" style="width:100%; height:340px;border:0px solid red;"></iframe>
		  	</div>	
		  	<div style="width:40%;height:340px;border:0px solid red;" class="pull-right">
		  		<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							历史视屏列表
						</h3>
					</div>
					<div style="width:100%;height:300px;overflow-y:auto;">
						<div class="panel-body" v-for="tm,index in videos">
							<button type="button" class="btn btn-default">{{index+1}}</button>
							<span style="width:75%;display: inline-block;">
								{{tm.name}}
							</span>
							<a  class="btn btn-info" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-star-o" aria-hidden="true"></i>
							</a>
						</div>						
					</div>		
				</div>		  		
		  	</div> 
		</div>
	</div>				 	    		    
</div>
<script src="./libs/jquery.min.js"></script>
<script src="./plugins/layer/layer.js"></script>
<script src="./libs/bootstrap.min.js"></script>
<script src="./libs/vue.min.js"></script>
<script src="./plugins/jqgrid/grid.locale-cn.js"></script>
<script src="./plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="./plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="./plugins/select2/select2.min.js"></script>
<script src="./plugins/laydate/laydate.js"></script> 
<script src="./js/common.js"></script>
<script src="./plugins/validate/jquery.validate.js"></script>
<script src="./plugins/validate/validate-methods.js"></script>
<script src="./plugins/validate/messages_zh.js"></script>
<script src="./js/ezuikit.js"></script>
<script src="./js/modules/buss/busscamerainfo2.js"></script>
<script type="text/javascript">
var gbzntapi = "";
var userCenterApi = "http://127.0.0.1:8088/";
var systemId = "3";
</script>
</body>
</html>